@switch (credential()?.type) {
    @case (eCredentialsType.SECRET_INPUT) {
      <div class="relative w-full">
        <input tabindex="0" class="block px-3 w-full h-9 bg-gray-100 text-sm rounded-lg border border-transparent
            appearance-none outline-none caret-primary-600
            hover:border-[rgba(0,0,0,0.08)] hover:bg-gray-50
            focus:bg-white focus:border-gray-300 focus:shadow-xs
            placeholder:text-sm placeholder:text-gray-400"
          type="password"
          [placeholder]="credential().placeholder | i18n"
          [(ngModel)]="valueModel"
        >
      </div>
    }
    @case (eCredentialsType.TEXT_INPUT) {
      <div class="relative w-full">
        <input tabindex="0" class="
          block px-3 w-full h-9 bg-gray-100 text-sm rounded-lg border border-transparent
          appearance-none outline-none caret-primary-600
          hover:border-[rgba(0,0,0,0.08)] hover:bg-gray-50
          focus:bg-white focus:border-gray-300 focus:shadow-xs
          placeholder:text-sm placeholder:text-gray-400"
          type="text" 
          [placeholder]="credential().placeholder | i18n"
          [(ngModel)]="valueModel"
        >
      </div>
    }
    @case (eCredentialsType.BOOLEAN) {
      <mat-slide-toggle class="inline-block ml-auto h-8" ngm-density small
        [matTooltip]="placeholder() | i18n"
        matTooltipPosition="before"
        [(ngModel)]="valueModel"
      />
    }
    @case (eCredentialsType.SELECT) {
      <select class="bg-gray-100 border border-transparent text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
        [(ngModel)]="valueModel"
      >
        @for (option of options(); track option.value) {
          <option [attr.selected]="valueModel() === option.value" [value]="option.value">{{option.label | i18n}}</option>
        }
      </select>
    }
    @case (eCredentialsType.REMOTE_SELECT) {
      <ngm-remote-select class="w-full"
        [url]="credential().selectUrl" 
        [placeholder]="credential().placeholder | i18n"
        [(ngModel)]="valueModel"
        [params]="params()"
        [multiple]="credential().multi"
        (error)="onError($event)"
      />
    }
}
@if (error()) {
  <div class="p-1 max-w-full truncate text-sm text-red-400"
    [matTooltip]="error()"
    matTooltipPosition="above"
  >{{error()}}</div>
}